<template>
    <div :style="styleObj">
        {{msg}}
    </div>
</template>

<script>
  import 'echarts/map/js/china.js'
  import 'echarts/map/js/world.js'
  import 'echarts/extension/bmap/bmap'
  //创建目录
  import fs from 'fs';
  import request from 'request';
  import path from 'path'

  export default {
    name: 'indexPage',
    data() {
      return {
        msg: 'Welcome to index Page!卧槽啊 ',

        styleObj: {
          width: 1000,
          height: 800,
          paddingTop: 0
        },

        // 起地图深度始值
        zoom: 12,
        // 起始展示中心点（这里直接从百度地图获取的 EPSG:4326 型的坐标）
        center: [114.10, 22.54],
        // 最大地图深度
        maxZoom: 18,
        rotation: 0,
      }
    },

    created: function () {
      this.resetSize();
    },

    methods: {
      init() {

        var dom = document.getElementById("container");
        var myChart = this.$echarts.init(dom);
        var app = {};
        var option = null;

        var data = [
          {name: '深圳', value: 273},
        ];

        var geoCoordMap = {
          '深圳': [113.962517, 22.546122]
        };

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };

        option = {
          // backgroundColor: '#404a59',
          title: {
            text: '',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          bmap: {
            // 初始展示坐标点，这里的坐标是武汉
            // 坐标可以从
            // https://github.com/longwosion/geojson-map-china
            // https://github.com/Lchiffon/leafletCN
            // http://api.map.baidu.com/lbsapi/getpoint/index.html    百度坐标拾取系统
            // http://lbsyun.baidu.com/		百度地图开放平台
            // http://lbsyun.baidu.com/index.php?title=open/dev-res   百度地图开放资源
            // 获取
            center: [113.952024, 22.545713],
            zoom: 15,
            minXZoom: 12,
            roam: true,
            mapStyle: {
              // 地图样式JSON，此JSON可以在
              // http://lbsyun.baidu.com/customv2/index.html
              // 百度地图个性在线编辑器配置
              styleJson: [
                {
                  "featureType": "all",
                  "elementType": "labels.text.fill",
                  "stylers": {
                    "color": "#ccccccff"
                  }
                },
                {
                  "featureType": "all",
                  "elementType": "labels.text.stroke",
                  "stylers": {
                    "color": "#000000d9",
                    "visibility": "on"
                  }
                },
                {
                  "featureType": "land",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#002229ff"
                  }
                },
                {
                  "featureType": "water",
                  "elementType": "all",
                  "stylers": {
                    "color": "#002328ff"
                  }
                },
                {
                  "featureType": "green",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#001000ff"
                  }
                },
                {
                  "featureType": "manmade",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#00404eff"
                  }
                },
                {
                  "featureType": "building",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#00546aff"
                  }
                },
                {
                  "featureType": "highway",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#0099b8ff"
                  }
                },
                {
                  "featureType": "arterial",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#019abcff"
                  }
                },
                {
                  "featureType": "local",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#2790a3ff"
                  }
                },
                {
                  "featureType": "railway",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#949494ff"
                  }
                },
                {
                  "featureType": "subway",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#000000ff"
                  }
                },
                {
                  "featureType": "subway",
                  "elementType": "labels.icon",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "poilabel",
                  "elementType": "labels.icon",
                  "stylers": {
                    "visibility": "off"
                  }
                }
              ]
            }
          },
          series: [
            {
              name: '设备',
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              data: convertData(data),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              showEffectOn: 'emphasis',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              // 文字样式
              label: {
                normal: {
                  formatter: '{b}',
                  color: '#fff',
                  position: 'right',
                  show: true
                }
              },
              //图形样式
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }
          ]
        };

        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      },

      resetSize() {
        // let fullHeight = document.documentElement.clientHeight >= this.$store.getters.mixHeight ? document.documentElement.clientHeight : this.$store.getters.mixHeight;
        // this.styleObj.height = fullHeight - 80 - 22 + 'px';
        // this.styleObj.paddingTop = '22px';
      },

      getUrlList() {
        console.log(window.urlList.length);

        let tempUrlList = window.urlList;
        window.urlList = [];
        // for(var i in tempUrlList){
        this.getT(tempUrlList);
        // }

        let that = this;
        if (that && !that._isDestroyed) {
          setTimeout(() => {
            if (that && !that._isDestroyed) {
              that.getUrlList();
            }
          }, 5000);
        }
      },

      getT(xxxUrls) {
        const imgArr = xxxUrls;

        const newArr = new Set(imgArr); //去重
        const finalArr = Array.from(newArr);

        const hostdir = "./static/abc/";
        var n = 0;
        for (const item of finalArr) {
          let x = item.substring(item.indexOf('&x=') + 3, item.indexOf('&y='));
          let y = item.substring(item.indexOf('&y=') + 3, item.indexOf('&z='));
          let z = item.substring(item.indexOf('&z=') + 3, item.indexOf('&udt='));

          let name = y + '.jpg';
          let dir = z + '/' + x;
          let dstpath = hostdir + dir + '/' + name;

          if (!fs.existsSync(dstpath)) {
            if (this.mkdirSync(hostdir + dir)) {
              ++n;
              request(item).pipe(fs.createWriteStream(dstpath))
            }
          }
        }
      },

      mkdirSync(dirname) {
        if (fs.existsSync(dirname)) {
          return true;
        } else {
          if (this.mkdirSync(path.dirname(dirname))) {
            fs.mkdirSync(dirname);
            return true;
          }
        }
        return false
      },


    },

    mounted: function () {
      // this.init();
      // this.getUrlList();
    }
  }
</script>

<style scoped>
</style>
